<template>
    <div>
        <div class="search">
            <span class='showTitle'><i class="el-icon-information"></i> {{DataClass}}</span>
            <div class='selectOption'>
                <el-cascader expand-trigger="hover" :options="options" v-model="selectedOptions" @change="handleChange" placeholder='请选择奖励类型' clearable></el-cascader>
                <el-button type="success" class='checkBtn' @click="openNewSet()">新建数据</el-button>
            </div>
        </div>
        <div class="rewardList">
            <ul class="listTitle">
                <li v-for='item in DataOptions'>{{item.value}}</li>
            </ul>
            <ul class='dataList' v-for='(item,index) in DataName'>
                <li>{{item.code}}</li>
                <li>{{item.dictValue}}</li>
                <li>
                    <el-button type="danger" @click='doDelete(index)'>删除</el-button>
                </li>
            </ul>
        </div>
        <div class="layer" v-show='layer'></div>
        <el-dialog v-model="dialogVisible" size="tiny">
            <p>{{dialogTitle}}</p>
            <el-input v-model="newDataName" placeholder="请输入名称" class='inputNumber'></el-input>
            <el-input v-model="newDataCode" placeholder="请输入Code(eg:LK_XX_001)" class='inputNumber'></el-input>
            <span slot="footer" class="dialog-footer">           
                                    <el-button type="primary" @click="doEdit">确 定</el-button>
                                    <el-button @click="cancelEdit">取 消</el-button>
                            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                options: [],
                selectedOptions: [],
                mainData: [],
                DataOptions: [{
                    value: 'Code'
                }, {
                    value: '名称'
                }, {
                    value: '操作'
                }],
                DataName: [],
                DataClass: '职业',
                dialogTitle: '添加',
                newDataName: '',
                newDataCode: '',
                layer: false,
                dialogVisible: false,
                dicName: '',
                eidtRewardIndex: '',
                editRecord: []
            };
        },
        methods: {
            // 获取应用数据列表
            getDataManage(first, second) {
                this.$store.commit('showLoading');
                let list = {
                    token: sessionStorage.token,
                    appId: 'com_sxluckyking_double'
                }
                this.getDataManageList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data.data);
                    let DataList = this.mainData = data.data,
                        dataStorage = [];
                    if (data.code === 200) {
                        for (let i = 0; i < DataList.length; i++) {
                            dataStorage.push({
                                'value': i + 1,
                                'label': DataList[i].dictValue,
                                'children': []
                            })
                            for (let j = 0; j < DataList[i].children.length; j++) {
                                if (i == 0 && j == 0) {
                                    dataStorage[i].children.push({
                                        'value': 0,
                                        'label': '职业'
                                    })
                                } else if (i == 1 && j == 0) {
                                    dataStorage[i].children.push({
                                        'value': 0,
                                        'label': '爱好'
                                    })
                                }
                                dataStorage[i].children.push({
                                    'value': j + 1,
                                    'label': DataList[i].children[j].dictValue,
                                })
                            }
                        }
                        this.options = dataStorage;
                    } else {
                        this.$message(data.message);
                    }
                    this.handleChange([first, second]);
                }).catch(msg => console.log(msg));
            },
            // 切换数据列表
            handleChange(value) {
                console.log(value.length)
                if(value.length == 0){
                    value = [1,0]
                }
                this.editRecord = value;
                let first = value[0],
                    second = value[1];
                if (second == 0) {
                    if (first == 1) {
                        this.DataClass = '职业';
                    } else {
                        this.DataClass = '爱好'
                    }
                    this.DataName = this.mainData[first - 1].children;
                } else {
                    this.DataClass = this.options[first - 1].children[second].label;
                    let list = this.mainData[first - 1].children[second - 1].children;
                    if (list == null) {
                        this.DataName = [];
                    } else {
                        this.DataName = list;
                    }
                }
            },
            doEdit() {
                this.newSetData();
            },
            cancelEdit() {
                this.dialogVisible = false;
            },
            // 新建数据
            newSetData() {
                let first = this.editRecord[0],
                    second = this.editRecord[1],
                    data = {
                        token: sessionStorage.token,
                        appId: 'com_sxluckyking_double',
                        code: this.newDataCode,
                        dictValue: this.newDataName,
                        dictType: first == 1 ? 'profession' : 'interest',
                    };
                if (second == 0) {
                    data.parentId = this.mainData[first - 1].id
                } else {
                    data.parentId = this.mainData[first - 1].children[second - 1].id;
                }
                this.setNewData(data).then((data) => {
                    if (data.code === 200) {
                        this.getDataManage(first, second);
                        this.$message.success('添加成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.dialogVisible = false;
                }).catch(msg => console.log(msg));
            },
            // 删除数据
            deleteData(i) {
                let first = this.editRecord[0],
                    second = this.editRecord[1],
                    list = {
                        id: this.DataName[i].id,
                        token: sessionStorage.token,
                        appId: 'com_sxluckyking_double'
                    }
                this.deleteDataManage(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('删除成功!');
                        this.getDataManage(first, second);
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            doDelete(i) {
                this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteData(i);
                }).catch(() => {
                });
            },
            openNewSet() {
                this.dialogVisible = true;
            },
            ...mapActions(['getDataManageList', 'setNewData', 'deleteDataManage'])
        },
        watch: {},
        created: function() {
            this.getDataManage(1, 0);
        }
    }
</script>


<style scoped>
    .rewardList {
        width: 100%;
    }
    h1 {
        text-align: left;
        color: rgb(109, 148, 189);
        padding: 10px 0 20px 30px;
    }
    p {
        color: rgb(109, 148, 189);
        text-align: left;
        font-size: 18px;
    }
    ul,
    h1 {
        margin: 0;
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 40%;
        border-right: 1px solid #ccc;
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 20%;
        border-right: 1px solid #ccc;
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 40%;
    }
    .newSet {
        position: absolute;
        top: 15px;
        right: 10px;
    }
    .el-select {
        width: 100%;
        margin-bottom: 20px;
    }
    .inputNumber {
        width: 100%;
        margin: 5px 0;
    }
    .scrool_list {
        width: 100%;
        height: 600px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .search {
        width: 100%;
        padding: 6px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption {
        float: right;
        text-align: right;
    }
    .checkBtn {
        width: 96px;
    }
    .showTitle {
        display: block;
        float: left;
        margin-left: 20px;
        height: 38px;
        line-height: 38px;
    }
</style>
